<template>
  <div class="products-container">
    <H1>products Page</H1>
    <div>
      <ul>
        <li
          v-for="product in products"
          :key="product.id"
          :class="{active: product.id === currentId}"
          @click="handleTabClick(product.id)"
        >
          {{ product.name }}
        </li>
      </ul>
      <div>
        {{ content }}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        products: [
          {
            id: '001',
            name: '女装',
            content: '10张女装图片'
          },
          {
            id: '002',
            name: '男装',
            content: '101张男装图片'
          },
          {
            id: '003',
            name: '童装',
            content: '100张童装图片'
          }
        ],
        currentId: ''
      }
    },

    created() {
      // 只是在页面第一次加载的时候初始化数据
      this.currentId = this.$route.params.id
      console.log(this.$route.params.msg)
    },

    computed: {
      content() {
        const product = this.products.find(p => p.id === this.currentId)
        return product.content
      }
    },

    methods: {
      handleTabClick(id) {
        this.currentId = id
      }
    }
  }
</script>

<style scoped>
.products-container {
  height: 100%;
}
.products-container > div {
  display: flex;
  height: 100%;
}

.products-container > div > div {
  padding-left: 20px;
}
.products-container ul {
  width: 100px;
  background-color: #eee;
}

.products-container ul li {
  height: 50px;
  text-align: center;
  line-height: 50px;
}

.products-container ul li.active {
  background-color: #000;
  color: #fff;
}

.products-container div {
  
}
</style>